<template>
	<view :style="'height:' +windowHeight+'px'">
		<view class="head">
			<view class="" :style="{'height':  statusBarHeight+'px'}"></view>
			<view class="head__box" :style="{'width':windowWidth+'px','height':  naviBarHeight+'px'}">
				<view @click="isBack" class="head__box__img">
					<image src="/static/icon/fanhui.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
				</view>
				<view style="font-size: 32rpx;color: #000000;">借阅列表</view>
			</view>
		</view>
		<view class="" :style="{'height': Number(statusBarHeight + naviBarHeight)+'px'}"></view>

		<view class="search">
			<view class="search__box">
				<input class="search__box__input" confirm-type="text" type="text" @confirm="searchText" v-model="title"/>
				<view class="search__box__content" v-if="title == ''">
					<image class="search__box__content__img" src="/static/icon/search.png" mode=""></image>
					<view class="search__box__content__text">
						<text>请输入关键词</text>
					</view>
				</view>
				<view class="search__box__icon" v-if="title != ''" @click="reset">
					<image class="search__box__icon__img" src="/static/icon/password_icon_del.png" mode=""></image>
				</view>
			</view>
		</view>
		<scroll-view v-if="is_occupied" scroll-y scroll-with-animation refresher-enabled @scrolltolower="initMore"
		 @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore" :refresher-triggered="triggered" style="margin-top: 25rpx;width: 100%;margin: 0;padding: 0rpx 43rpx;box-sizing: border-box;background-color: #FDFDFD;padding-top: 40rpx;"
		 scroll-y="true" class="" :style="'height:'+ Number(windowHeight - 60 -  Number(statusBarHeight + naviBarHeight))+'px'">


			<view class="list-unit" v-for="(item,index) in books_list" :key="index" @click="navigateToPage(index)">
				<view class="list-top">
					<view class="" style="background: linear-gradient(#3172b6 0%, #8bc0f7 100%);border-radius: 0px 0px 20rpx 20rpx;
			color: #FFFFFF;width: 180rpx;height: 80rpx;font-size: 32rpx;display: flex;align-items: center;justify-content: center;">
						{{item.borrowStatus=='4'?'已驳回':item.borrowStatus=='3'?'已归还':item.borrowStatus=='2'?'已取书':item.borrowStatus=='1'?'已同意':item.borrowStatus=='0'?'申请中':'申请中'}}
					</view>
					<view class="" style="display: flex;align-items: center;font-size: 30rpx;color: #999999;">
						查看<image src="../../static/icon/tubiao.png" style="width: 12rpx;height: 20rpx;margin-left: 10rpx;" mode=""></image>
					</view>
				</view>
				<view class="list-bottom" >
					<view class="list-bottom__unit" >
						<view class="text" style="width: 50%;">
						 <view class="" style="white-space: nowrap;">
						 	书名:
						 </view>
						 <view class="text-oneline" style="color: #666666;font-size: 26rpx;padding: 0rpx 10rpx;">
							<text v-for="(item1,index1) in item.bookNames" :key="index1 + 'bookName'">
								《{{item1}}》
							</text>
						 </view>
						</view>
					</view>
					<view class="list-bottom__unit" style="margin-top: 30rpx;">
						<view class="text" style="width: 50%;">
							<view class="" style="white-space: nowrap;">
								借阅时间：
							</view>
							<text style="color: #666666;font-size: 26rpx;">{{item.applyTime}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 150rpx;">
				
			</view>
		</scroll-view>

		<view class="" v-else :style="'height:'+ Number(windowHeight - 60 -  Number(statusBarHeight + naviBarHeight) - 49 - 60)+'px'"
		 style="width: 100%;display: flex;align-items: center;justify-content: center;">
			<image src="../../static/icon/kong_icon_bg.png" style="width: 422rpx;height: 298rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	import moment from '@/utils/moment.min.js'
	import {Debounce} from '@/common/utils.js' // 防抖函数（减少函数的调用）
	
	export default {
		data() {
			return {
				books_list: [],
				book_name: '',
				pageNo: 1, //当前页数
				pageSize: 20, //每页数量
				is_page: true,
				title: '', //模糊查询
				is_occupied: false,
				state_img: true,


				enabled: false,
				triggered: false,
				freshing: false,
				user_info:null,

			};
		},
		props: {
			windowWidth: { //系统界面宽度
				type: Number,
				default () {
					return 0;
				}
			},
			windowHeight: { //系统界面高度
				type: Number,
				default () {
					return 0;
				}
			},
			statusBarHeight: { //状态栏高度
				type: Number,
				default () {
					return 0;
				}
			},
			naviBarHeight: { //导航栏高度
				type: Number,
				default () {
					return 0;
				}
			}
		},
		mounted() {
			this.init()
			this.freshing = false;
			this.user_info = uni.getStorageSync('user_info')
			uni.$on('updateBorrowList_event', (data) => {
				this.pageNo = 1
				this.books_list = []
				this.init()
			})
		},
		methods: {
			init() {
				this.$bookLending.fAppBooksGetUserBorrowList({
					bookName: this.title,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}).then((res) => {
					console.log(JSON.stringify(res))
					var data = res.data.result
					if (data.length > 0) {
						this.is_page = true
					} else {
						this.is_page = false
					}
					data.forEach((item, index) => {
						item.applyTime = moment(item.applyTime).format('YYYY.MM.DD');
					})
					this.books_list = this.books_list.concat(data);
					console.log(this.books_list)
					if (this.books_list.length > 0) {
						this.is_occupied = true
					} else {
						this.is_occupied = false
					}
				})
			},
			isBack() {
				this.$emit('isBack');
			},
			//跳转书籍详情
			navigateToPage(index) {

				uni.navigateTo({
					url: '/pages/library/bookDetails?id=' + this.books_list[index].orderNum + '&type=more'
				})
			},
			searchText:Debounce(
			function(){
				this.pageNo = 1
				this.books_list = []
				this.init()
			}),
			reset() {
				this.title = ''
				this.pageNo = 1
				this.books_list = []
				this.init()
				
			},
			initMore() {

				if (this.is_page) {
					this.pageNo++
					this.init()
					this.switchState()
				}
			},
			switchState() {
				this.state_img = !this.state_img
				if (this.state_img) {
					this.books_list.sort(function(a, b) {
						return a.borrowStatus - b.borrowStatus;
					})
				} else {
					this.books_list.sort(function(a, b) {
						return b.borrowStatus - a.borrowStatus
					})
				}

			},
			/**
			 * @name 下拉刷新
			 */
			refresherrefresh(e) {
				this.pageNo = 1
				if (this.freshing) return;
				this.triggered = true;
				this.$bookLending.fAppBooksGetUserBorrowList({
					book_name: this.title,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}).then((res) => {
					this.books_list = []
					var data = res.data.result
				
					if (data.length > 0) {
						this.is_page = true
					} else {
						this.is_page = false
					}
					data.forEach((item, index) => {
						item.applyTime = moment(item.applyTime).format('YYYY.MM.DD');
					})
					this.books_list = this.books_list.concat(data);
					if (this.books_list.length > 0) {
						this.is_occupied = true
					} else {
						this.is_occupied = false
					}
				})
				this.freshing = true;
				setTimeout(() => {
				    this.triggered = false;
				    this.freshing = false;
				}, 2000)
			},
			refresherrestore() {
				// uni.showToast({
				// 	title: '刷新成功',
				// 	duration: 2000,
				// 	icon: 'none'
				// });
			}
		}
	}
</script>

<style lang="scss">
	.head {
		position: fixed;top: 0;left: 0;right: 0;background-color: #FFFFFF;
		&__box {
			display: flex;align-items: center;justify-content: center;position: relative;
			&__img {
				position:absolute;left: 43rpx;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #000000;
			}
		}
	}
	.search {
		width: 100%;
		height: 94rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		&__box {
			width: 700rpx;
			height: 80rpx;
			background-color: #F6F6F6;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			&__input {
				width: 600rpx;
				height: 80rpx;
				position: relative;
				left: 30rpx;
			}
			&__content {
				height: 80rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 74rpx;
				&__img {
					width: 24rpx;
					height: 24rpx;
				}
				&__text {
					height: 80rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: rgba(153, 153, 153, 1);
					margin-left: 13rpx;
				}
			}
			&__icon {
				width: 30rpx;height: 80rpx;border-radius: 50%;margin-left: 42rpx;display: flex;align-items: center;justify-content: center;
				&__img {
					width: 30rpx;height: 30rpx;border-radius: 50%;
				}
			}
		}
	}
	
	.text-oneline {
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.list-unit{
		flex: 1;display: flex;flex-direction: column;justify-content: space-between;background-color: #FFFFFF;box-shadow: 0px 5rpx 20rpx 5rpx rgba(226,226,226,0.43);margin-bottom: 40rpx;padding-bottom: 50rpx;border-radius: 20rpx;
	}
	.list-top{
		flex: 1;display: flex;align-items: center;justify-content: space-between;padding: 0rpx 58rpx 0rpx 37rpx;
	}
	.list-bottom{
		flex: 1;margin-top: 43rpx;padding: 0rpx 61rpx;display: flex;flex-direction: column;border-top: 1px solid #f8f8f8;padding-top: 43rpx;
		&__unit{
			display: flex;align-items: center;
			.text{
				flex: 1;color: #333333;font-size: 30rpx;display: flex;align-items: center;
			}
		}
	}



</style>
